<template>
    <div class="common-layout">
        <el-container>
            <el-header style="width: 390px;">
                <div style="margin: 0;padding: 0;display: flex;flex-direction: row;">
                    <div style="height: 50px;margin-top: 20px;margin-left: 7px;">
                        <el-icon @click = "jump1" style="font-size: 30px; width: 30px;height: 50px;"><ArrowLeftBold @click = "return1" /></el-icon>
                    </div>
                    <div style="height: 80px;">
                        <p style="font-size: 20px;margin-left: 35px;margin-top: 30px;">发布文章</p>
                    </div>
                 </div>
            </el-header>
            <el-main style="margin-top: 20px;">
                <div>
                    <img style="width: 70px;height: 100px;" src="./图片/8888.jpg">
                    <img style="width: 70px;height: 100px;" src="./图片/9999.jpeg">
                    <img style="width: 70px;height: 100px;" src="./图片/添加图片.png">
                </div>
                <div>
                    <el-input v-model="works.id" style="width: 350px" placeholder="填写id" />
                </div>
                <div>
                    <el-input v-model="works.imgUrls" style="width: 350px" placeholder="填写图片链接" />
                </div>
                <div style="margin-top: 10px;height: 500px;">
                    <el-input v-model="works.title" style="width: 350px" placeholder="填写标题会有更多赞嗷" />
                    <div style="height: 300px;">
                        <el-input  v-model="works.content" style="width: 350px;height: 300px;" placeholder="想说点什么吗，就写在这里" />
                    </div>
                </div>
                <div></div>
            </el-main>
            <el-footer>
                <div style="display: flex;flex-direction: row;flex-wrap: wrap;margin-top: 30px;">
                    <div><el-button @click = "c1" style="width: 70px;margin-left: 20px;">视频</el-button></div>
                    <div><el-button @click = "c2" style="width: 70px;margin-left: 10px;">美食</el-button></div>
                    <div><el-button @click = "c3" style="width: 70px;margin-left: 10px;">家装</el-button></div>
                    <div><el-button @click = "c4" style="width: 70px;margin-left: 10px;">影视</el-button></div>
                    <div><el-button @click = "c5" style="width: 70px;margin-left: 20px; margin-top: 10px;">科学科普</el-button></div>
                    <div><el-button @click = "c6" style="width: 70px;margin-left: 10px;margin-top: 10px;">汽车</el-button></div>
                    <div><el-button @click = "c7" style="width: 70px;margin-left: 10px;margin-top: 10px;">手工</el-button></div>
                </div>
                <div>
                    <el-button  @click = "doAdd" style="width: 310px;margin-left: 20px;margin-top: 100px;" type="primary" round>发布文章</el-button>
                </div>
            </el-footer>
         </el-container>
    </div>
    
 
  <RouterView />
</template>

<style scoped>
:deep(.el-input__inner) {
  border-color: gainsboro;          /* 替换为你想要的边框颜色 */
}
</style>

<script setup>
 import {ArrowLeftBold,Edit} from "@element-plus/icons-vue"
 import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus'
 import {ref} from 'vue'
const router1 = useRouter();
const jump1 = () => {
  // 如果是内部路由跳转 (Vue Router)
  router1.push({path:'/fabuzuoping'})
};

//添加数据
const works = ref({
    id:"",
    title:"",
    imgUrls:[],
    content:"",
    userId:localStorage.getItem("id"),
    categoryId:""
})
const c1 = ()=>{
    works.value.categoryId ="2" 
}
const c2 = ()=>{
    works.value.categoryId ="3" 
}
const c3 = ()=>{
    works.value.categoryId ="4" 
}
const c4 = ()=>{
    works.value.categoryId ="5" 
}
const c5 = ()=>{
    works.value.categoryId ="6" 
}
const c6 = ()=>{
    works.value.categoryId ="7" 
}
const c7 = ()=>{
    works.value.categoryId ="8" 
}
const router12 = useRouter();

const doAdd = ()=>{
    fetch("http://localhost:3000/articles",{
                    method:"post",
                    body:JSON.stringify(works.value)
                }).then(response=>response.json()).then((data)=>{
                    ElMessage.success('操作成功')
                    router12.push({path:'/'})

                })
}
</script>